<template>
  <div class="fillcontain" v-loading="loading">
    <bt-col-header title="场景案例模板"></bt-col-header>
    <div class="page-content">
      <el-form :model="dataForm" @keyup.enter.native="getDataList()" class="" label-width="80px">
        <div class="row">
          <div class="col-md-4">
            <el-form-item label="模板名称">
              <el-input v-model="dataForm.templateName" placeholder="名称" clearable></el-input>
            </el-form-item>
          </div>
          <div class="col-md-4">
            <el-form-item label="所属模型">
              <el-select v-model="dataForm.entityId" filterable placeholder="请选择">
                <el-option v-for="item in entityDatas" :key="item.entityId" :label="item.entityName" :value="item.entityId">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="col-md-4">
            <el-form-item label="模板类型">
              <el-select v-model="dataForm.templateType" filterable placeholder="请选择">
                <el-option v-for="item in templateTypes" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 text-center mt-2">
            <rich-button type="info" plain shape="capsule" icon="search" @click="getDataList()">查询</rich-button>
            <rich-button shape="capsule" icon="quit" @click="reset()">重置</rich-button>
          </div>
        </div>
      </el-form>  
      <div class="">
        <!-- 操作按钮 -->
        <div class="btn-padding left">
          <el-button type="info" icon="circle-plus" plain @click="addOrUpdateHandle()">新增</el-button>
        </div>

        <!-- 查询结果列表 -->
        <div class="table_container">
          <!-- 列表 -->
          <el-table :data="dataList" border style="width: 100%; ">
            <el-table-column type="index" label="序号" header-align="center" width="50">
            </el-table-column>
            <el-table-column prop="templateCode" header-align="center" align="center" label="模板编码">
            </el-table-column>
            <el-table-column prop="templateName" header-align="center" align="center" label="模板名称">
            </el-table-column>
            <el-table-column prop="templateType" header-align="center" align="center" label="模板类型">
              <template slot-scope="scope">
                {{scope.row.templateType | templateTypesFilter}}
              </template>
            </el-table-column>
            <el-table-column prop="entityName" header-align="center" align="center" label="所属模型">
            </el-table-column>
            <el-table-column prop="isEffect" header-align="center" align="center" label="状态">
              <template slot-scope="scope">
                {{scope.row.isEffect | isEffectFilter}}
              </template>
            </el-table-column>

            <el-table-column header-align="center" align="center" width="150" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改
                </el-button>
                <el-button v-if="scope.row.isEffect==='1'" type="text" size="small" @click="edit(scope.row)">禁用</el-button>
                <el-button v-if="scope.row.isEffect==='0'" type="text" size="small" @click="edit(scope.row)">启用</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          
          <el-pagination 
            class="float-right mt-2"
            @size-change="sizeChangeHandle" 
            @current-change="currentChangeHandle" 
            :current-page="page.pageIndex" 
            :page-sizes="[10, 20, 50, 100]" 
            :page-size="page.pageSize" 
            :total="page.totalPage" 
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
              
        </div>
      </div>
    </div>
    

    

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

  </div>
</template>

<script>
import { pageData, updateData } from '@/api/testCase/interfaceTemplate'
import { entityList } from '@/api/baseConfig/entity'
import constant from "../../../../../api/constant";
import AddOrUpdate from './add-or-update'

export default {
  data() {
    return {
      templateTypes: constant.ruleConfig.templateTypes,
      loading: false,
      entityDatas: [],
      dataForm: {
        templateName: '',
        templateType: '',
        entityId: null
      },
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false,
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0
      }
    }
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList()
    this.listEntitys()
  },
  methods: {
    // 启用禁用
    edit(row) {
      let data = row
      if (row.isEffect === '0') {
        data.isEffect = '1'
      } else {
        data.isEffect = '0'
      }
      updateData(JSON.stringify(data)).then(res => {
        this.getDataList()
      })
    },
    listEntitys() {
      entityList({}).then(res => {
        this.entityDatas = res.data.data
      })
    },
    reset() {
      this.dataForm = {
        templateName: '',
        templateType: '',
        entityId: null
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val
      this.page.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.pageIndex = val
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      let params = {
        pageNumber: this.page.pageIndex,
        pageSize: this.page.pageSize,
        templateType: this.dataForm.templateType,
        entityId: this.dataForm.entityId,
        templateName: this.dataForm.templateName
      }
      this.$store.dispatch('loading/CHANGE_LOADING', true)
      pageData(params).then(res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
        this.dataList = res.data.data.list
        this.page.totalPage = res.data.data.totalCount
      }).catch(err => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
      })
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      constant.clearTag(this)
      if (id) {
        this.$router.push({ path: "/drools-testCase/interfaceTemplate/add-or-update/" + id })
      } else {
        this.$router.push({ path: "/drools-testCase/interfaceTemplate/add-or-update" })
      }
    }
  },
  filters: {
    isEffectFilter: function (value) {
      return constant.getLabel(value, constant.ruleConfig.isEffects)
    },
    templateTypesFilter: function (value) {
      return constant.getLabel(value, constant.ruleConfig.templateTypes)
    },
  }
}
</script>
<style>
body .el-table th.gutter {
  display: table-cell !important;
}

.keys {
  word-wrap: break-word;
  word-break: normal;
}
</style>
